<script setup lang="ts">
import { onMounted, ref, defineProps, defineEmits } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";
import { ElInput, ElButton } from "element-plus";
import { mapSetting } from '#/api/map';

const props = defineProps(["isShow"]);
const emits = defineEmits(["back"]);

let map = null;
let searchInput = ref("");
// 存储标点位置
let positionArr = ref([116.397428, 39.90923]);
// 存储地址
let addressValue = ref("");
// 使用ref来存储Marker实例
let marker = ref(null);
let lngLatLng = ref(null);
let lngLatLat = ref(null);

const sureFn = () => {
  emits("returnData", {
    positionArr: positionArr.value,
    addressValue: addressValue.value,
  });
};

const cancelFn = () => {
  
};

AMapLoader.load({
  key: mapSetting.mapKey, // 申请好的Web端开发者Key，首次调用 load 时必填
  version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
  plugins: ["AMap.PlaceSearch", "AMap.AutoComplete", "AMap.Marker"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
})
  // 异步加载插件
  .then((AMap) => {
    map = new AMap.Map("container", {
      // 设置地图容器id
      viewMode: "2D", // 地图模式
      zoom: 11, // 初始化地图级别
      center: [116.397428, 39.90923], // 初始化地图中心点位置
    });

    // 地图点击事件
    map.on("click", (e) => {
      console.log(e);
      lngLatLng.value = e.lnglat.lng;
      lngLatLat.value = e.lnglat.lat;
      console.log(lngLatLng.value, lngLatLat.value);
      positionArr.value = [lngLatLng.value, lngLatLat.value];
      addressValue.value = "";
      if (marker.value) {
        marker.value.setPosition([lngLatLng.value, lngLatLat.value]); // 更新Marker位置
      }
    });

    let auto = new AMap.AutoComplete({
      city: "北京市", // 限定城市，默认全国
      input: "search_input",
    });
    let placeSearch = new AMap.PlaceSearch({
      city: "北京市",
      map: map,
    });
    auto.on("select", (e) => {
      placeSearch.search(e.poi.name);
      console.log(e.poi);
      positionArr.value = [e.poi.location.lng, e.poi.location.lat];
      addressValue.value = e.poi.address;
      if (marker.value) {
        marker.value.setPosition([e.poi.location.lng, e.poi.location.lat]); // 更新Marker位置
      }
    });
    // 标点位置
    marker.value = new AMap.Marker({
      position: [116.397428, 39.90923], //经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
      map: map, // 当操作完成时，应该将结果展示在哪个地图上
    });
    map.add(marker);
  })
  .catch((e) => {
    console.log(e);
  });
</script>
 
<template>
  <div class="p-5">
    <div id="page">
      <div class="title">选择位置</div>
      <div class="search">
        <ElInput
          v-model="searchInput"
          placeholder="搜索"
          id="search_input"
        ></ElInput>
        <ElButton type="primary">搜索</ElButton>
      </div>
      <div id="container"></div>
      <div class="sure">
        <ElButton type="primary" @click="sureFn">确认</ElButton>
        <ElButton @click="cancelFn">取消</ElButton>
      </div>
    </div>
  </div>
</template>
 
<style scoped>
.mask {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  background-color: rgb(0 0 0 / 60%);
}

#container {
  width: 100%;
  height: 400px;
  padding: 0;
  margin: 0;
  border-radius: 10px;
}

.title {
  width: 100%;
  margin-bottom: 20px;
  text-align: left;
}

.search {
  display: flex;
  width: 100%;
  height: 30px;
  margin-bottom: 20px;
}

.search .el-input {
  width: 100%;
  height: 30px;
  border-radius: 5px;
}

.search :deep(.el-input__wrapper) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.search .el-button {
  height: 100%;
  border-left: none;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

#box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 50%;
  height: 80%;
  padding: 1.5vw;
  margin: 0 auto;
  background-color: #fff;
  box-shadow: 0 0 15px rgb(0 0 0 / 50%);
}

.sure {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  margin-top: 20px;
}
</style>
